{% extends 'common_tpl.html' %}
{% load static %}
{% block title %}
    价格
{% endblock %}
{% block css %}
    <style>
        .row-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, 350px);
            gap: 10px;
        }
    </style>

{% endblock %}
{% block content %}
    <div class="container">
        <div style="margin: 50px;">
            <h1 style="text-align: center">多种方案，使用多种场景</h1>
        </div>
        <div class="row-grid">
            {% for price in prices %}
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title text-center">{{ price.title }}</h3>
                    </div>
                    <div class="panel-body">
                        {% if price.price != 0 %}
                            <div class="text-center h2">￥{{ price.price }}/年</div>
                            <hr>
                            <div class="input-group">
                                <span class="input-group-addon">数量</span>
                                <input type="number" class="form-control" min="1" value="1" name="quantity">
                                <div class="input-group-btn">
                                    <button class="btn btn-primary get-order" right_id="{{ price.id }}">立即购买</button>
                                </div>
                            </div>
                        {% else %}
                            <div class="text-center h2">￥0/年</div>
                            <hr>
                            <div class="text-center text-warning">
                                免费版无限期使用
                            </div>
                        {% endif %}
                        <table class="table" style="margin-top: 20px">
                            <tbody>
                            <tr>
                                <td>最大项目数量：</td>
                                <td>{{ price.project_num }}</td>
                            </tr>
                            <tr>
                                <td>项目成员容量：</td>
                                <td>{{ price.project_member }}人</td>
                            </tr>
                            <tr>
                                <td>项目空间：</td>
                                <td>{{ price.project_space }}G</td>
                            </tr>
                            <tr>
                                <td>单文件最大支持：</td>
                                <td>{{ price.single_file_space }}M</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}
{% block js %}
    <script>
        $(function () {
            bindOrder();
        })

        function bindOrder() {
            $('.get-order').click(function () {
                location.href = "{% url 'main:order' %}?right=" + $(this).attr('right_id') + "&quantity=" + $(this).parent().prev('input').val()
            })
        }
    </script>
{% endblock %}